/**
 * @author  Xyz
 * 分公司管理
 */
import React from 'react';
import {
  Form,
  Input,
  Button,
  message,
  Table,
  Popover,
  Modal
} from 'antd';
import {
  Container,
  SearchItem,
  Options,
} from "./styles";
import PTable from '../../../components/Pro/PTable';
import PDrawer from '../../../components/Pro/PDrawer';

import {AddCompanyTip} from './components';
import DrawBranchCompanyDetail from './DrawBranchCompanyDetail';//分公司详情
const FormItem = Form.Item;
@Form.create()
export default class BranchCompanyManager extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      visible: false,
      pageParm: {     //数据请求 分页信息
        pageSize: '10',//缴交情况
        pageNumber: "1",
        keyWord: "",
      },
      comBranchId: "",//分公司ID
      forceUpdate: false,
    }
  }

  /******************************生命周期******************************/

  componentDidMount = () => {

  }

  /******************************ajax请求******************************/


  /******************************相关事件******************************/

    //新增分公司
  addCompany = () => {
    console.log("新增分公司");
    this.setState({visible: true, comBranchId: ""});
  }
  //修改分公司 item
  upDateItem = ({comBranchId}) => {
    if (!comBranchId) {
      return;
    }
    this.setState({visible: true, comBranchId});
  }

  //关闭 修改 item 抽屉
  closeDrawer = () => {
    Modal.confirm({
      title: '当前信息未提交，返回后无法保证。是否确认返回？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.setState({visible: false});
      },
      onCancel: () => {
        console.log('Cancel');
      },
    });
  }
  confirDrawer = () =>{
    this.setState({visible: false});
  }

  //删除提示框
  deleteConfirm = () => {
    Modal.confirm({
      title: '删除后将无法查看分公司信息，并影响年报统计。是否确认删除？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        console.log('OK');
      },
      onCancel: () => {
        console.log('Cancel');
      },
    });
  }
  //搜索
  search = () => {
    this.setState({forceUpdate: true}, () => {
      this.setState({forceUpdate: false});
    });
  }

  //重置搜索条件
  resetSearch = () => {
    const pageParm = {
      pageSize: '10',
      pageNumber: "1",
      keyWord: "",
    }
    this.setState({pageParm});
  }

  //关键字更改
  inputChange = (e) => {
    const pageParm = this.state.pageParm;
    pageParm.keyWord = e.target.value;
    this.setState({pageParm});
  }

  /******************************render******************************/
  renderTable = () => {

    const columns1 = [
      {
        title: '分公司名称',
        dataIndex: 'comName',
        key: 'comName',
        render: text => <a href="javascript:;">{text}</a>,
      },
      {
        title: '营业执照号',
        dataIndex: 'comCerNo',
        key: 'comCerNo',
      },
      {
        title: '负责人',
        dataIndex: 'chargePerName',
        key: 'chargePerName',
      },
      {
        title: '负责人手机',
        dataIndex: 'chargePerPhone',
        key: 'chargePerPhone',
      },
      {
        title: '注册地址',
        dataIndex: 'regAddress',
        key: 'regAddress',
        render: (text, {regProvinceName, regCityName, regAreaName}) => (
          <span>{regProvinceName + "-" + regCityName + "-" + regAreaName}</span>
        ),
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Options>
            <span onClick={this.upDateItem.bind(this, record)}>修改</span>
            <span onClick={this.deleteConfirm}>删除</span>
            <span>管理层</span>
          </Options>
        ),
      }
    ];

    return (
      <PTable
        url="enterpriseCompanyComBaseInfoGetBranch"
        pageParm={this.state.pageParm}
        columns={columns1}
        forceUpdate={this.state.forceUpdate}
      />
    );
  }

  render() {
    const {visible, comBranchId} = this.state;
    return (
      <Container>
        <SearchItem>
          关键字：
          <Input className="input" placeholder="请输入负责人/手机号/备案机关" onChange={this.inputChange}
                 value={this.state.pageParm.keyWord}/>
          <Button className="btn" type="primary" onClick={this.search}>搜索</Button>
          <Button onClick={this.resetSearch}>重置</Button>
        </SearchItem>
        <SearchItem>
          <Popover content={AddCompanyTip} trigger="hover" placement="topLeft">
            <Button className="btn" type="primary" onClick={this.addCompany}>+新增分公司</Button>
          </Popover>
          <Button type="danger">在线备案</Button>
        </SearchItem>

        {this.renderTable()}

        <DrawBranchCompanyDetail
          visible={visible}
          comBranchId={comBranchId}
          closeDrawer={this.closeDrawer}
          confirDrawer={this.confirDrawer}
          updataTable={this.search}
        />

      </Container>
    );
  }
}


